<template>
  <div
    @click="handleClick"
    @contextmenu.prevent.stop="handleRightClick"
    @mousemove="handleMousemove"
    class="hyd_container"
  >
    <div class="top">
      <div class="sub-box">
        <User />
        <User text="FLT   CTRL" />
      </div>
      <div class="sub-box">
        <User text="NOSE GEAR & STEERING" />
      </div>
      <div class="sub-box">
        <User text="ALTN/RSV  BRAKES" />
      </div>
      <div class="sub-box">
        <User text="FLAPS" />
        <User text="MAIN GEAR & STEERING" />
      </div>
      <div class="sub-box">
        <User text="FLT   CTRL" />
      </div>
      <div class="sub-box">
        <User text="NORM BRKS" />
        <User text="R   REV" />
        <User text="FLT   CTRL" />
      </div>
    </div>
    <select
      v-model="selectValue"
      @change="handleChange"
      :style="selectStyle"
      id="myselect"
      class="hyd-selector"
    >
      <option v-for="option in options" :value="option">{{ option }}</option>
    </select>
    <canvas ref="canvasRef" width="634" height="300"></canvas>
    <div class="lower">
      <div class="left">
        <div
          :style="lEngPumpStyle"
          class="boxItem"
          style="margin-left: 20px; margin-top: 110px"
        ></div>
        <div
          :style="lEngPumpColor"
          class="disc_font"
          style="margin-left: 50px; margin-top: -15px"
        >
          L<br />ENG
        </div>
        <div
          :style="lElecPumpStyle"
          class="boxItem"
          style="margin-left: 96px; margin-top: 40px"
        ></div>
        <div
          :style="lElecPumpColor"
          class="disc_font"
          style="margin-left: 50px; margin-top: -65px"
        >
          L<br />ELEC
          <span style="margin-top: 5px; display: block; color: white">{{
            lElecPump
          }}</span>
        </div>
        <div
          :style="sovStyle"
          class="sov"
          style="margin-left: 24px; margin-top: 5px"
        ></div>
        <span
          :style="sovColor"
          style="
            margin-left: 58px;
            margin-top: -25px;
            display: block;
            font-weight: 600;
          "
          >SOV</span
        >
      </div>
      <div class="center">
        <div class="center_0">
          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              margin-top: 19px;
              margin-left: 25px;
            "
          >
            <span
              style="display: block; color: rgb(8, 214, 255); font-weight: 600"
              >ISLN</span
            >
            <div :style="islnStyle1" style="margin-top: -5px" class="sov"></div>
          </div>
          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              margin-top: 19px;
              margin-left: 25px;
            "
          >
            <span
              style="display: block; color: rgb(8, 214, 255); font-weight: 600"
              >ISLN</span
            >
            <div :style="islnStyle2" style="margin-top: -5px" class="sov"></div>
          </div>
        </div>
        <div class="center_1">
          <div class="pump_disc">
            <span class="pump_disc_item1">P</span>
            <span class="pump_disc_item1">R</span>
            <span class="pump_disc_item1">I</span>
            <span class="pump_disc_item2">M</span>
            <span class="pump_disc_item1">A</span>
            <span class="pump_disc_item1">R</span>
            <span class="pump_disc_item1">Y</span>
          </div>
          <div
            class="boxItem"
            :style="c1ElecPumpStyle"
            style="margin-top: 90px; margin-left: 26px"
          ></div>
          <div
            :style="c1ElecPumpColor"
            class="disc_font"
            style="margin-left: -5px; margin-top: 115px"
          >
            ELEC<br />C1
          </div>
          <div
            :style="c2ElecPumpColor"
            class="disc_font"
            style="margin-left: 75px; margin-top: 115px"
          >
            ELEC<br />C2
          </div>
          <div
            class="boxItem"
            :style="c2ElecPumpStyle"
            style="margin-top: 90px; margin-left: -5.5px"
          ></div>
        </div>
        <div class="center_2">
          <div class="pump_disc2">
            <span class="pump_disc_item1">D</span>
            <span class="pump_disc_item1">E</span>
            <span class="pump_disc_item1">M</span>
            <span class="pump_disc_item1">A</span>
            <span class="pump_disc_item1">N</span>
            <span class="pump_disc_item1">D</span>
          </div>
          <div
            :style="c1AirPumpColor"
            class="disc_font"
            style="margin-left: 47px; margin-top: 15px"
          >
            AIR<br />C1
            <span
              style="
                margin-top: 5px;
                display: block;
                color: white;
                margin-left: -8px;
              "
              >{{ c1AirPump }}</span
            >
          </div>
          <div
            :style="c1AirPumpStyle"
            class="boxItem"
            style="margin-left: -8px; margin-top: 30px"
          ></div>
          <div
            :style="c2AirPumpStyle"
            class="boxItem"
            style="margin-left: 33px; margin-top: 30px"
          ></div>
          <div
            :style="c2AirPumpColor"
            class="disc_font"
            style="margin-left: -8px; margin-top: 15px"
          >
            AIR<br />C2
            <span
              style="
                margin-top: 5px;
                display: block;
                color: white;
                margin-left: 8px;
              "
              >{{ c2AirPump }}</span
            >
          </div>
          <div
            :style="ratPumpColor"
            class="disc_font"
            style="margin-top: 15px; margin-left: 4px"
          >
            RAT
          </div>
          <div
            :style="ratPumpStyle"
            class="boxItem"
            style="margin-left: -13px; margin-top: -30px"
          ></div>
        </div>
      </div>
      <div class="right">
        <div
          :style="rEngPumpStyle"
          class="boxItem"
          style="margin-left: 66px; margin-top: 110px"
        ></div>
        <div
          :style="rEngPumpColor"
          class="disc_font"
          style="margin-left: 22px; margin-top: -18px"
        >
          R<br />ENG
        </div>
        <div
          :style="rElecPumpColor"
          class="disc_font"
          style="margin-left: 22px; margin-top: 18px"
        >
          R<br />ELEC
          <span style="margin-top: 5px; display: block; color: white">{{
            rElecPump
          }}</span>
        </div>
        <div
          :style="rElecPumpStyle"
          class="boxItem"
          style="margin-left: -10px; margin-top: -27px"
        ></div>
        <div
          :style="sovStyle2"
          class="sov"
          style="margin-left: 70px; margin-top: -9px"
        ></div>
        <span
          :style="sovColor"
          style="
            margin-left: 36px;
            margin-top: -25px;
            display: block;
            font-weight: 600;
          "
          >SOV</span
        >
      </div>
    </div>
    <Press />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, watch, computed } from "vue";
import {
  drawArc,
  drawLine,
  drawTriangle,
  drawVerticalLine,
  drawHorizontalLine,
} from "../../../utils/drawCanvas";
import { useStore } from "vuex";
import User from "./User.vue";
import Press from "./Press.vue";

const store = useStore();

const canvasRef = ref(null);
const lEngPumpStyle = reactive({
  border: "2px solid white",
  borderRadius: "1px",
});
const lElecPumpColor = reactive({
  color: "rgb(8, 214, 255)",
});
const lEngPumpColor = reactive({
  color: "rgb(8, 214, 255)",
});
const rEngPumpColor = reactive({
  color: "rgb(8, 214, 255)",
});
const rElecPumpColor = reactive({
  color: "rgb(8, 214, 255)",
});

const lElecPumpStyle = reactive({
  border: "2px solid white",
  borderRadius: "1px",
  backgroundColor: "rgb(0, 0, 0)",
});

const rEngPumpStyle = reactive({
  border: "2px solid white",
  borderRadius: "1px",
  backgroundColor: "rgb(0, 0, 0)",
});
const rElecPumpStyle = reactive({
  border: "2px solid white",
  borderRadius: "1px",
  backgroundColor: "rgb(0, 0, 0)",
});

const sovStyle = reactive({
  border: "2px solid rgb(8,255,66)",
  borderRadius: "100%",
});

const sovStyle2 = reactive({
  border: "2px solid rgb(8,255,66)",
  borderRadius: "100%",
});

const islnStyle1 = reactive({
  border: "2px solid rgb(8,255,66)",
  borderRadius: "100%",
});

const islnStyle2 = reactive({
  border: "2px solid rgb(8,255,66)",
  borderRadius: "100%",
});

const options = ref(["ON", "OFF", "AUTO"]);

const selectStyle = reactive({
  backgroundColor: "#333",
  color: "white",
  border: "1px solid #666",
  padding: "5px",
  cursor: "pointer",
  zIndex: 3, // 确保在canvas上层
  position: "absolute",
  display: "none",
});

const sovColor = reactive({
  color: "rgb(8, 214, 255)",
});

const c1ElecPumpStyle = reactive({
  border: "2px solid white",
  borderRadius: "1px",
});

const c2ElecPumpStyle = reactive({
  border: "2px solid white",
  borderRadius: "1px",
});

const c1ElecPumpColor = reactive({
  color: "rgb(8, 214, 255)",
});

const c2ElecPumpColor = reactive({
  color: "rgb(8, 214, 255)",
});

const c1AirPumpColor = reactive({
  color: "rgb(8, 214, 255)",
});

const c2AirPumpColor = reactive({
  color: "rgb(8, 214, 255)",
});

const c1AirPumpStyle = reactive({
  border: "2px solid white",
  borderRadius: "1px",
});

const c2AirPumpStyle = reactive({
  border: "2px solid white",
  borderRadius: "1px",
});

const ratPumpStyle = reactive({
  border: "2px solid white",
  borderRadius: "1px",
});

const ratPumpColor = reactive({
  color: "rgb(8, 214, 255)",
});

const selectValue = ref("ON");

const lEngPump = computed(() => store.getters["hyd/lEngPump"]);
const rEngPump = computed(() => store.getters["hyd/rEngPump"]);
const c1ElecPump = computed(() => store.getters["hyd/c1ElecPump"]);
const c2ElecPump = computed(() => store.getters["hyd/c2ElecPump"]);
const lElecPump = computed(() => store.getters["hyd/lElecPump"]);
const c1AirPump = computed(() => store.getters["hyd/c1AirPump"]);
const c2AirPump = computed(() => store.getters["hyd/c2AirPump"]);
const rElecPump = computed(() => store.getters["hyd/rElecPump"]);
const lPress = computed(() => store.getters["hyd/lPress"]);
const rPress = computed(() => store.getters["hyd/rPress"]);
const cPress = computed(() => store.getters["hyd/cPress"]);
const ratPump = computed(() => store.getters["hyd/ratPump"]);

let lPressDiff = 0;
let rPressDiff = 0;
let cPressDiff = 0;

watch(
  [
    () => store.getters["hyd/lEngPump"],
    () => store.getters["hyd/rEngPump"],
    () => store.getters["hyd/c1ElecPump"],
    () => store.getters["hyd/c2ElecPump"],
    () => store.getters["hyd/lElecPump"],
    () => store.getters["hyd/c1AirPump"],
    () => store.getters["hyd/c2AirPump"],
    () => store.getters["hyd/rElecPump"],
    () => store.getters["hyd/lPress"],
    () => store.getters["hyd/rPress"],
    () => store.getters["hyd/cPress"],
    () => store.getters["hyd/ratPump"],
  ],
  (newVal, oldVal) => {
    newVal.forEach((val, index) => {
      const getterNames = [
        "lEngPump",
        "rEngPump",
        "c1ElecPump",
        "c2ElecPump",
        "lElecPump",
        "c1AirPump",
        "c2AirPump",
        "rElecPump",
        "lPress",
        "rPress",
        "cPress",
        "ratPump",
      ];

      const getterName = getterNames[index];
      const oldValForGetter = oldVal[index];
      const newValForGetter = newVal[index];
      if (newValForGetter !== oldValForGetter) {
        switch (getterName) {
          case "lEngPump":
            break;
          case "rEngPump":
            break;
          case "c1ElecPump":
            break;
          case "c2ElecPump":
            break;
          case "lElecPump":
            break;
          case "c1AirPump":
            break;
          case "c2AirPump":
            break;
          case "rElecPump":
            break;
          case "lPress":
            if (Math.abs(newValForGetter - 1350) >= 11) {
              if (
                newValForGetter - 1950 < 11 &&
                newValForGetter - 1950 >= 0 &&
                lElecPumpRun
              ) {
                checkIfMultiPumpWork();
              }
              return;
            }
            lPressDiff = newValForGetter - oldValForGetter;
            break;
          case "rPress":
            if (Math.abs(newValForGetter - 1350) >= 11) {
              if (
                newValForGetter - 1950 < 11 &&
                newValForGetter - 1950 >= 0 &&
                rElecPumpRun
              ) {
                checkIfMultiPumpWork();
              }
              return;
            }
            rPressDiff = newValForGetter - oldValForGetter;
            break;
          case "cPress":
            if (
              newValForGetter < 1350 &&
              1350 - newValForGetter > 11 &&
              1350 - newValForGetter <= 22
            ) {
              cPressDiff = newValForGetter - oldValForGetter;
              checkCSysStaus();
            } else {
              if (
                newValForGetter - 1950 < 11 &&
                newValForGetter - 1950 >= 0 &&
                (c1AirPumpRun || c2AirPumpRun)
              ) {
                checkIfMultiPumpWork();
              }
              return;
            }
            break;
          case "ratPump":
            break;
          default:
            console.log("Unknown property change");
        }
        drawCanvas();
      }
    });
  }
);

const checkIfMultiPumpWork = () => {
  if (
    (c1AirPumpRun || c2AirPumpRun) &&
    (c1ElecPump.value || c2ElecPump.value)
  ) {
    if (c1AirPumpRun) {
      c1AirPumpRun = false;
    }
    if (c2AirPumpRun) {
      c2AirPumpRun = false;
    }
  }

  if (lElecPumpRun && lEngPump.value) {
    lElecPumpRun = false;
  }
  if (rElecPumpRun && rEngPump.value) {
    rElecPumpRun = false;
  }
  drawCanvas();
};

const checkCSysStaus = () => {
  if (ratPump.value) {
    if (
      c1AirPump.value == "OFF" &&
      c2AirPump.value == "OFF" &&
      !c1ElecPump.value &&
      !c2ElecPump.value
    ) {
      // console.log('冲压空气涡轮泵启动')
      ratPumpRun = true;
    } else {
      ratPumpRun = false;
    }
  }

  if (c1AirPump.value == "ON") {
    c1AirPumpRun = true;
  } else if (c1AirPump.value == "OFF") {
    c1AirPumpRun = false;
  } else {
    if (c1ElecPump.value || c2ElecPump.value) {
      if (cPressDiff == 0) {
        if (cPress.value > 1350) {
          c1AirPumpRun = false;
        } else {
          c1AirPumpRun = true;
        }
      } else {
        if (cPressDiff < 0) {
          c1AirPumpRun = true;
        } else {
          c1AirPumpRun = false;
        }
      }
    } else {
      c1AirPumpRun = true;
    }
  }

  if (c2AirPump.value == "ON") {
    c2AirPumpRun = true;
  } else if (c2AirPump.value == "OFF") {
    c2AirPumpRun = false;
  } else {
    if (c1ElecPump.value || c2ElecPump.value) {
      if (cPressDiff == 0) {
        if (cPress.value > 1350) {
          c2AirPumpRun = false;
        } else {
          c2AirPumpRun = true;
        }
      } else {
        if (cPressDiff < 0) {
          c2AirPumpRun = true;
        } else {
          c2AirPumpRun = false;
        }
      }
    } else {
      c2AirPumpRun = true;
    }
  }

  cPressDiff = 0;
};

let ratPumpRun = false;
let c1AirPumpRun = false;
let c2AirPumpRun = false;
let lElecPumpRun = false;
let rElecPumpRun = false;

const PI = Math.PI;

onMounted(() => {
  drawCanvas();
});

const boxes = [
  { x: 17, y: 295, width: 70, height: 55 },
  { x: 57, y: 385, width: 75, height: 60 },
  { x: 542, y: 295, width: 70, height: 53 },
  { x: 498, y: 385, width: 77, height: 60 },
  { x: 182, y: 275, width: 70, height: 55 },
  { x: 343, y: 275, width: 70, height: 55 },
  { x: 210, y: 395, width: 77, height: 55 },
  { x: 309, y: 395, width: 70, height: 55 },
  { x: 400, y: 340, width: 65, height: 50 },
];

const handleRightClick = () => {
  selectStyle.display = "none";
};

const handleMousemove = (event) => {
  // const x = event.clientX
  // const y = event.clientY

  const container = document.querySelector(".simulator_container");
  const rect = container.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  // console.log(x, y)
  if (
    x >= boxes[0].x &&
    x <= boxes[0].x + boxes[0].width &&
    y >= boxes[0].y &&
    y <= boxes[0].y + boxes[0].height
  ) {
    //设置Apu
    document.body.style.cursor = "pointer";
    // 当鼠标点击时触发相应的方法
    clickItem = "lEngPump";
    lEngPumpColor.color = "rgb(8,255,66)";
  } else if (
    x >= boxes[1].x &&
    x <= boxes[1].x + boxes[1].width &&
    y >= boxes[1].y &&
    y <= boxes[1].y + boxes[1].height
  ) {
    //设置Apu
    document.body.style.cursor = "pointer";
    // 当鼠标点击时触发相应的方法
    clickItem = "lElecPump";
    lElecPumpColor.color = "rgb(8,255,66)";
  } else if (
    x >= boxes[2].x &&
    x <= boxes[2].x + boxes[2].width &&
    y >= boxes[2].y &&
    y <= boxes[2].y + boxes[2].height
  ) {
    //设置Apu
    document.body.style.cursor = "pointer";
    // 当鼠标点击时触发相应的方法
    clickItem = "rEngPump";
    rEngPumpColor.color = "rgb(8,255,66)";
  } else if (
    x >= boxes[3].x &&
    x <= boxes[3].x + boxes[3].width &&
    y >= boxes[3].y &&
    y <= boxes[3].y + boxes[3].height
  ) {
    //设置Apu
    document.body.style.cursor = "pointer";
    // 当鼠标点击时触发相应的方法
    clickItem = "rElecPump";
    rElecPumpColor.color = "rgb(8,255,66)";
  } else if (
    x >= boxes[4].x &&
    x <= boxes[4].x + boxes[4].width &&
    y >= boxes[4].y &&
    y <= boxes[4].y + boxes[4].height
  ) {
    //设置Apu
    document.body.style.cursor = "pointer";
    // 当鼠标点击时触发相应的方法
    clickItem = "c1ElecPump";
    c1ElecPumpColor.color = "rgb(8,255,66)";
  } else if (
    x >= boxes[5].x &&
    x <= boxes[5].x + boxes[5].width &&
    y >= boxes[5].y &&
    y <= boxes[5].y + boxes[5].height
  ) {
    //设置Apu
    document.body.style.cursor = "pointer";
    // 当鼠标点击时触发相应的方法
    clickItem = "c2ElecPump";
    c2ElecPumpColor.color = "rgb(8,255,66)";
  } else if (
    x >= boxes[6].x &&
    x <= boxes[6].x + boxes[6].width &&
    y >= boxes[6].y &&
    y <= boxes[6].y + boxes[6].height
  ) {
    //设置Apu
    document.body.style.cursor = "pointer";
    // 当鼠标点击时触发相应的方法
    clickItem = "c1AirPump";
    c1AirPumpColor.color = "rgb(8,255,66)";
  } else if (
    x >= boxes[7].x &&
    x <= boxes[7].x + boxes[7].width &&
    y >= boxes[7].y &&
    y <= boxes[7].y + boxes[7].height
  ) {
    //设置Apu
    document.body.style.cursor = "pointer";
    // 当鼠标点击时触发相应的方法
    clickItem = "c2AirPump";
    c2AirPumpColor.color = "rgb(8,255,66)";
  } else if (
    x >= boxes[8].x &&
    x <= boxes[8].x + boxes[8].width &&
    y >= boxes[8].y &&
    y <= boxes[8].y + boxes[8].height
  ) {
    //设置Apu
    document.body.style.cursor = "pointer";
    // 当鼠标点击时触发相应的方法
    clickItem = "ratPump";
    ratPumpColor.color = "rgb(8,255,66)";
  } else {
    document.body.style.cursor = "default";
    if (clickItem) {
      switch (clickItem) {
        case "lEngPump":
          lEngPumpColor.color = "rgb(8,214,255)";
          break;
        case "lElecPump":
          lElecPumpColor.color = "rgb(8,214,255)";
          break;
        case "rEngPump":
          rEngPumpColor.color = "rgb(8,214,255)";
          break;
        case "rElecPump":
          rElecPumpColor.color = "rgb(8,214,255)";
          break;
        case "c1ElecPump":
          c1ElecPumpColor.color = "rgb(8,214,255)";
          break;
        case "c2ElecPump":
          c2ElecPumpColor.color = "rgb(8,214,255)";
          break;
        case "c1AirPump":
          c1AirPumpColor.color = "rgb(8,214,255)";
          break;
        case "c2AirPump":
          c2AirPumpColor.color = "rgb(8,214,255)";
          break;
        case "ratPump":
          ratPumpColor.color = "rgb(8,214,255)";
          break;
        default:
          console.log("Unknown clickItem");
      }
    }
    clickItem = null;
  }
};

const handleClick = (event) => {
  if (clickItem) {
    switch (clickItem) {
      case "lEngPump":
        //设置lEngPump 状态
        store.dispatch("hyd/setLEngPump", !store.getters["hyd/lEngPump"]);
        break;
      case "lElecPump":
        // 创建选择器
        createSelector(event, clickItem);
        break;
      case "rEngPump":
        store.dispatch("hyd/setREngPump", !store.getters["hyd/rEngPump"]);
        break;
      case "rElecPump":
        createSelector(event, clickItem);
        break;
      case "c1ElecPump":
        store.dispatch("hyd/setC1ElecPump", !store.getters["hyd/c1ElecPump"]);
        break;
      case "c2ElecPump":
        store.dispatch("hyd/setC2ElecPump", !store.getters["hyd/c2ElecPump"]);
        break;
      case "c1AirPump":
        createSelector(event, clickItem);
        break;
      case "c2AirPump":
        createSelector(event, clickItem);
        break;
      case "ratPump":
        store.dispatch("hyd/setRatPump", !store.getters["hyd/ratPump"]);
        break;
      default:
        console.log("Unknown clickItem");
    }
  }
};

let width = 0;
let height = 0;
let clickItem = null;
let selectorType = null;

const createSelector = (event, clickItem) => {
  const container = document.querySelector(".simulator_container");
  const rect = container.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  selectStyle.left = `${x}px`;
  selectStyle.top = `${y - 20}px`;
  switch (clickItem) {
    case "lElecPump":
      selectValue.value = lElecPump.value;
      break;
    case "rElecPump":
      selectValue.value = rElecPump.value;
      break;
    case "c1AirPump":
      selectValue.value = c1AirPump.value;
      break;
    case "c2AirPump":
      selectValue.value = c2AirPump.value;
      break;
    default:
      console.log("Unknown clickItem");
  }

  selectStyle.display = "";
  selectorType = clickItem;
};

const handleChange = () => {
  if (selectorType == "lElecPump") {
    store.dispatch("hyd/setLElecPump", selectValue.value);
  } else if (selectorType == "rElecPump") {
    store.dispatch("hyd/setRElecPump", selectValue.value);
  } else if (selectorType == "c1AirPump") {
    store.dispatch("hyd/setC1AirPump", selectValue.value);
  } else if (selectorType == "c2AirPump") {
    store.dispatch("hyd/setC2AirPump", selectValue.value);
  }
  selectStyle.display = "none";
};

const drawCanvas = () => {
  const canvas = canvasRef.value;
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");
    width = canvas.width;
    height = canvas.height;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    checkCSysStaus();
    drawLeftSystem(ctx);
    drawRightSystem(ctx);
    drawCenterSystem(ctx);
    drawSysLine(ctx);
  }
};

const drawSysLine = (ctx) => {
  if (c1AirPumpRun || c2AirPumpRun || c1ElecPump.value || c2ElecPump.value) {
    drawLine(
      ctx,
      width * 0.24,
      height * 0.25 - 5,
      width * 0.7,
      height * 0.25 - 5,
      10,
      "rgb(8, 255, 66)"
    );
    drawArc(
      ctx,
      width * 0.24,
      height * 0.25 - 10,
      5,
      0,
      1 * PI,
      false,
      null,
      null,
      "rgb(8, 255, 66)"
    );
    drawArc(
      ctx,
      width * 0.7,
      height * 0.25 - 10,
      5,
      0,
      1 * PI,
      false,
      null,
      null,
      "rgb(8, 255, 66)"
    );
    drawLine(
      ctx,
      width * 0.24 - 5,
      height * 0.25 - 10,
      width * 0.24 - 5,
      height * 0.08,
      10,
      "rgb(8, 255, 66)"
    );
    drawTriangle(
      ctx,
      width * 0.24 - 5,
      height * 0.08,
      22,
      height * 0.05,
      "rgb(8, 255, 66)"
    );
    drawLine(
      ctx,
      width * 0.7 + 5,
      height * 0.25 - 10,
      width * 0.7 + 5,
      height * 0.08,
      10,
      "rgb(8, 255, 66)"
    );
    drawTriangle(
      ctx,
      width * 0.7 + 5,
      height * 0.08,
      22,
      height * 0.05,
      "rgb(8, 255, 66)"
    );
    drawLine(
      ctx,
      width * 0.31 + 1,
      height * 0.25 - 5,
      width * 0.31 + 1,
      height * 0.12,
      10,
      "rgb(8, 255, 66)"
    );
    drawArc(
      ctx,
      width * 0.31 + 6,
      height * 0.12,
      5,
      0,
      1 * PI,
      true,
      null,
      null,
      "rgb(8, 255, 66)"
    );
    drawLine(
      ctx,
      width * 0.31 + 6,
      height * 0.12 - 5,
      width * 0.42,
      height * 0.12 - 5,
      10,
      "rgb(8, 255, 66)"
    );
    drawArc(
      ctx,
      width * 0.42,
      height * 0.12 - 10,
      5,
      0,
      1 * PI,
      false,
      null,
      null,
      "rgb(8, 255, 66)"
    );
    drawLine(
      ctx,
      width * 0.42 + 5,
      height * 0.12 - 10,
      width * 0.42 + 5,
      height * 0.12 - 15,
      10,
      "rgb(8, 255, 66)"
    );
    drawTriangle(
      ctx,
      width * 0.42 + 5,
      height * 0.12 - 15,
      22,
      height * 0.05,
      "rgb(8, 255, 66)"
    );
    drawLine(
      ctx,
      width * 0.58,
      height * 0.08,
      width * 0.58,
      height * 0.25,
      10,
      "rgb(8, 255, 66)"
    );
    drawTriangle(
      ctx,
      width * 0.58,
      height * 0.08,
      22,
      height * 0.05,
      "rgb(8, 255, 66)"
    );
    ctx.beginPath();
    ctx.moveTo(width * 0.65, height * 0.25 - 5 - 11);
    ctx.lineTo(width * 0.65, height * 0.25 - 5 + 11);
    ctx.lineTo(width * 0.65 + height * 0.05, height * 0.25 - 5);
    ctx.fillStyle = "rgb(8, 255, 66)";
    ctx.fill();
    ctx.closePath();
  } else {
    drawHorizontalLine(
      ctx,
      width * 0.24 - 5,
      height * 0.25 - 5,
      width * 0.41 + 5,
      2,
      "rgb(255, 255, 255)"
    );
    drawArc(
      ctx,
      width * 0.24 - 4,
      height * 0.25 - 6,
      1,
      0,
      1 * PI,
      false,
      null,
      null,
      "rgb(255, 255, 255)"
    );
    drawVerticalLine(
      ctx,
      width * 0.24 - 5,
      height * 0.25 - 6,
      height * -0.17,
      2,
      "rgb(255, 255, 255)"
    );
    drawTriangle(
      ctx,
      width * 0.24 - 5,
      height * 0.08,
      14,
      height * 0.05,
      "rgb(255, 255, 255)"
    );
    drawVerticalLine(
      ctx,
      width * 0.31 + 1.5,
      height * 0.25 - 5,
      height * -0.13,
      2,
      "rgb(255, 255, 255)"
    );
    drawArc(
      ctx,
      width * 0.31 + 2.5,
      height * 0.12 - 5,
      1,
      0,
      1 * PI,
      true,
      2,
      "rgb(255, 255, 255)",
      "rgb(255, 255, 255)"
    );
    drawHorizontalLine(
      ctx,
      width * 0.31 + 4,
      height * 0.12 - 6,
      width * 0.11 + 2,
      2,
      "rgb(255, 255, 255)"
    );
    drawArc(
      ctx,
      width * 0.42 + 6,
      height * 0.12 - 7,
      1,
      0,
      1 * PI,
      false,
      2,
      "rgb(255, 255, 255)",
      "rgb(255, 255, 255)"
    );
    drawVerticalLine(
      ctx,
      width * 0.42 + 7,
      height * 0.12 - 7,
      -10,
      2,
      "rgb(255, 255, 255)"
    );
    drawTriangle(
      ctx,
      width * 0.42 + 7,
      height * 0.08 - 5,
      14,
      height * 0.05,
      "rgb(255, 255, 255)"
    );
    drawLine(
      ctx,
      width * 0.58,
      height * 0.08,
      width * 0.58,
      height * 0.25 - 5,
      2,
      "rgb(255, 255, 255)"
    );
    // drawTriangle(ctx, width * 0.58, height * 0.08, 22, height * 0.05, 'rgb(8, 255, 66)')
    drawTriangle(
      ctx,
      width * 0.58,
      height * 0.08,
      14,
      height * 0.05,
      "rgb(255, 255, 255)"
    );

    console.log(ratPumpRun, ratPump.value);

    if (ratPumpRun && ratPump.value) {
      drawVerticalLine(
        ctx,
        width * 0.71 - 1,
        height * 0.25,
        height * -0.17,
        10,
        "rgb(8, 255, 66)"
      );
      drawHorizontalLine(
        ctx,
        width * 0.71 - 1,
        height * 0.25 - 5,
        -30,
        "rgb(8, 255, 66)"
      );
      ctx.beginPath();
      ctx.moveTo(width * 0.65, height * 0.25 - 5 - 11);
      ctx.lineTo(width * 0.65, height * 0.25 - 5 + 11);
      ctx.lineTo(width * 0.65 + height * 0.05, height * 0.25 - 5);
      ctx.fillStyle = "rgb(255, 198, 41)";
      ctx.fill();
      ctx.closePath();
      drawTriangle(
        ctx,
        width * 0.71 - 1,
        height * 0.08,
        22,
        height * 0.05,
        "rgb(8, 255, 66)"
      );
    } else {
      drawVerticalLine(
        ctx,
        width * 0.71 - 1.5,
        height * 0.23 + 1,
        height * -0.17 + 5,
        2,
        "rgb(255, 255, 255)"
      );
      drawHorizontalLine(
        ctx,
        width * 0.71 - 1,
        height * 0.25 - 5,
        -30,
        "rgb(8, 255, 66)"
      );
      ctx.beginPath();
      ctx.moveTo(width * 0.65, height * 0.25 - 5 - 7);
      ctx.lineTo(width * 0.65, height * 0.25 - 5 + 7);
      ctx.lineTo(width * 0.65 + height * 0.05, height * 0.25 - 5);
      ctx.fillStyle = "rgb(255, 255, 255)";
      ctx.fill();
      ctx.closePath();
      drawTriangle(
        ctx,
        width * 0.71 - 1.5,
        height * 0.08,
        14,
        height * 0.05,
        "rgb(255, 255, 255)"
      );
    }
  }
};

const drawLeftSystem = (ctx) => {
  let lPressNum = 0;

  // Function to draw a line
  const drawLine = (startX, startY, endX, endY, lineWidth, strokeStyle) => {
    if (endY == 70 && lineWidth == 10) {
      lPressNum++;
    }

    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = strokeStyle;
    ctx.stroke();
    ctx.closePath();
  };

  // Function to set styles
  const setStyles = (border, borderRadius) => {
    lEngPumpStyle.border = border;
    lEngPumpStyle.borderRadius = borderRadius;
  };

  if (lEngPump.value) {
    drawLine(
      width * 0.06,
      height * 0.25,
      width * 0.06,
      height * 1,
      10,
      "rgb(8, 255, 66)"
    );
    drawLine(
      width * 0.06 + 5,
      height * 0.25 - 5,
      width * 0.12 - 5,
      height * 0.25 - 5,
      10,
      "rgb(8, 255, 66)"
    );
    drawArc(
      ctx,
      width * 0.06 + 5,
      height * 0.25,
      5,
      PI,
      1.5 * PI,
      false,
      10,
      "rgb(8, 255, 66)"
    );
    drawArc(
      ctx,
      width * 0.12 - 5,
      height * 0.25 - 10,
      5,
      PI,
      0,
      true,
      10,
      "rgb(8, 255, 66)",
      "rgb(8, 255, 66)"
    );
    setStyles("4px solid rgb(8, 255, 66)", "2px");
  } else {
    drawLine(
      width * 0.06,
      height * 0.25 - 5,
      width * 0.06,
      height * 0.37,
      2,
      "white"
    );
    drawLine(width * 0.06, height * 0.5, width * 0.06, height * 1, 2, "white");
    drawLine(
      width * 0.06 + 1,
      height * 0.25 - 6,
      width * 0.12,
      height * 0.25 - 6,
      2,
      "white"
    );
    drawArc(
      ctx,
      width * 0.06 + 1,
      height * 0.25 - 5,
      1,
      PI,
      1.5 * PI,
      false,
      2,
      "white",
      "white"
    );
    setStyles("2px solid white", "1px");
  }

  if (lElecPump.value == "OFF") {
    drawLine(
      width * 0.18,
      height * 0.25 - 5,
      width * 0.18,
      height * 0.69,
      2,
      "white"
    );
    drawLine(width * 0.18, height * 0.82, width * 0.18, height * 1, 2, "white");
    drawLine(
      width * 0.12,
      height * 0.25 - 6,
      width * 0.18 - 1,
      height * 0.25 - 6,
      2,
      "white"
    );
    drawArc(
      ctx,
      width * 0.18 - 1,
      height * 0.25 - 5,
      1,
      0,
      PI,
      true,
      2,
      "white",
      "white"
    );
    lElecPumpStyle.border = "2px solid white";
    lElecPumpStyle.borderRadius = "1px";
    lElecPumpRun = false;
  } else if (lElecPump.value == "ON") {
    drawLine(
      width * 0.18,
      height * 0.25,
      width * 0.18,
      height * 1,
      10,
      "rgb(8, 255, 66)"
    );
    drawLine(
      width * 0.18 - 5,
      height * 0.25 - 5,
      width * 0.12 + 5,
      height * 0.25 - 5,
      10,
      "rgb(8, 255, 66)"
    );
    drawArc(
      ctx,
      width * 0.18 - 5,
      height * 0.25,
      5,
      PI,
      2 * PI,
      false,
      10,
      "rgb(8, 255, 66)"
    );
    drawArc(
      ctx,
      width * 0.12 + 5,
      height * 0.25 - 10,
      5,
      PI,
      2 * PI,
      true,
      10,
      "rgb(8, 255, 66)",
      "rgb(8, 255, 66)"
    );
    lElecPumpStyle.border = "4px solid rgb(8, 255, 66)";
    lElecPumpStyle.borderRadius = "2px";
    lElecPumpRun = true;
  } else if (lElecPump.value == "AUTO") {
    if (!lEngPump.value) {
      drawLine(
        width * 0.18,
        height * 0.25,
        width * 0.18,
        height * 1,
        10,
        "rgb(8, 255, 66)"
      );
      drawLine(
        width * 0.18 - 5,
        height * 0.25 - 5,
        width * 0.12 + 5,
        height * 0.25 - 5,
        10,
        "rgb(8, 255, 66)"
      );
      drawArc(
        ctx,
        width * 0.18 - 5,
        height * 0.25,
        5,
        PI,
        2 * PI,
        false,
        10,
        "rgb(8, 255, 66)"
      );
      drawArc(
        ctx,
        width * 0.12 + 5,
        height * 0.25 - 10,
        5,
        PI,
        2 * PI,
        true,
        10,
        "rgb(8, 255, 66)",
        "rgb(8, 255, 66)"
      );
      lElecPumpStyle.border = "4px solid rgb(8, 255, 66)";
      lElecPumpStyle.borderRadius = "2px";
      lElecPumpRun = true;
    } else {
      if (lPressDiff > 0) {
        drawLine(
          width * 0.18,
          height * 0.25 - 5,
          width * 0.18,
          height * 0.69,
          2,
          "white"
        );
        drawLine(
          width * 0.18,
          height * 0.82,
          width * 0.18,
          height * 1,
          2,
          "white"
        );
        drawLine(
          width * 0.12,
          height * 0.25 - 6,
          width * 0.18 - 1,
          height * 0.25 - 6,
          2,
          "white"
        );
        drawArc(
          ctx,
          width * 0.18 - 1,
          height * 0.25 - 5,
          1,
          0,
          PI,
          true,
          2,
          "white",
          "white"
        );
        lElecPumpStyle.border = "2px solid white";
        lElecPumpStyle.borderRadius = "1px";
        lElecPumpRun = false;
      } else if (lPressDiff < 0) {
        drawLine(
          width * 0.18,
          height * 0.25,
          width * 0.18,
          height * 1,
          10,
          "rgb(8, 255, 66)"
        );
        drawLine(
          width * 0.18 - 5,
          height * 0.25 - 5,
          width * 0.12 + 5,
          height * 0.25 - 5,
          10,
          "rgb(8, 255, 66)"
        );
        drawArc(
          ctx,
          width * 0.18 - 5,
          height * 0.25,
          5,
          PI,
          2 * PI,
          false,
          10,
          "rgb(8, 255, 66)"
        );
        drawArc(
          ctx,
          width * 0.12 + 5,
          height * 0.25 - 10,
          5,
          PI,
          2 * PI,
          true,
          10,
          "rgb(8, 255, 66)",
          "rgb(8, 255, 66)"
        );
        lElecPumpStyle.border = "4px solid rgb(8, 255, 66)";
        lElecPumpStyle.borderRadius = "2px";
        lElecPumpRun = true;
      } else {
        if (lPress.value < 1350) {
          drawLine(
            width * 0.18,
            height * 0.25,
            width * 0.18,
            height * 1,
            10,
            "rgb(8, 255, 66)"
          );
          drawLine(
            width * 0.18 - 5,
            height * 0.25 - 5,
            width * 0.12 + 5,
            height * 0.25 - 5,
            10,
            "rgb(8, 255, 66)"
          );
          drawArc(
            ctx,
            width * 0.18 - 5,
            height * 0.25,
            5,
            PI,
            2 * PI,
            false,
            10,
            "rgb(8, 255, 66)"
          );
          drawArc(
            ctx,
            width * 0.12 + 5,
            height * 0.25 - 10,
            5,
            PI,
            2 * PI,
            true,
            10,
            "rgb(8, 255, 66)",
            "rgb(8, 255, 66)"
          );
          lElecPumpStyle.border = "4px solid rgb(8, 255, 66)";
          lElecPumpStyle.borderRadius = "2px";
          lElecPumpRun = true;
        } else {
          drawLine(
            width * 0.18,
            height * 0.25 - 5,
            width * 0.18,
            height * 0.69,
            2,
            "white"
          );
          drawLine(
            width * 0.18,
            height * 0.82,
            width * 0.18,
            height * 1,
            2,
            "white"
          );
          drawLine(
            width * 0.12,
            height * 0.25 - 6,
            width * 0.18 - 1,
            height * 0.25 - 6,
            2,
            "white"
          );
          drawArc(
            ctx,
            width * 0.18 - 1,
            height * 0.25 - 5,
            1,
            0,
            PI,
            true,
            2,
            "white",
            "white"
          );
          lElecPumpStyle.border = "2px solid white";
          lElecPumpStyle.borderRadius = "1px";
          lElecPumpRun = false;
        }
      }
    }
  }
  if (lPressNum == 2 || lPressNum == 1) {
    //画到系统的管路
    ctx.beginPath();
    ctx.moveTo(
      width * 0.12,
      lPressNum == 2 ? height * 0.25 : height * 0.25 - 5
    );
    ctx.lineTo(width * 0.12, height * 0.08);
    ctx.strokeStyle = "rgb(8, 255, 66)";
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(width * 0.12 - 11, height * 0.08);
    ctx.lineTo(width * 0.12 + 11, height * 0.08);
    ctx.lineTo(width * 0.12, height * 0.03);
    ctx.fillStyle = "rgb(8, 255, 66)";
    ctx.fill();
    ctx.closePath();
    store.dispatch("hyd/increaseLPress");
  } else {
    ctx.beginPath();
    ctx.moveTo(width * 0.12, height * 0.25 - 5);
    ctx.lineTo(width * 0.12, height * 0.08);
    ctx.strokeStyle = "rgb(255, 255, 255)";
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(width * 0.12 - 7, height * 0.08);
    ctx.lineTo(width * 0.12 + 7, height * 0.08);
    ctx.lineTo(width * 0.12, height * 0.04);
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.fill();
    ctx.closePath();
    store.dispatch("hyd/decreaseLPress");
  }
  lPressDiff = 0;
};

const setREngPumpTrue = (ctx) => {
  ctx.beginPath();
  ctx.moveTo(width * 0.94, height * 0.25);
  ctx.lineTo(width * 0.94, height * 1);
  ctx.strokeStyle = "rgb(8, 255, 66)";
  ctx.lineWidth = 10;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.moveTo(width * 0.94 - 5, height * 0.25 - 5);
  ctx.lineTo(width * 0.88 + 5, height * 0.25 - 5);
  ctx.strokeStyle = "rgb(8, 255, 66)";
  ctx.lineWidth = 10;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc(width * 0.94 - 5, height * 0.25, 5, PI, 2 * PI, false);
  ctx.strokeStyle = "rgb(8, 255, 66)";
  ctx.lineWidth = 10;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc(width * 0.88 + 5, height * 0.25 - 10, 5, PI, 2 * PI, true);
  ctx.strokeStyle = "rgb(8, 255, 66)";
  ctx.lineWidth = 10;
  ctx.stroke();
  ctx.closePath();
  rEngPumpStyle.border = "4px solid rgb(8, 255, 66)";
  rEngPumpStyle.borderRadius = "2px";
  rPressNum++;
};

const setREngPumpFalse = (ctx) => {
  ctx.beginPath();
  ctx.moveTo(width * 0.94, height * 0.25 - 5);
  ctx.lineTo(width * 0.94, height * 0.37);
  ctx.strokeStyle = "white";
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.moveTo(width * 0.94, height * 0.5);
  ctx.lineTo(width * 0.94, height * 1);
  ctx.strokeStyle = "white";
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc(width * 0.94 - 1, height * 0.25 - 5, 1, 0, PI, true);
  ctx.strokeStyle = "white";
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.moveTo(width * 0.94, height * 0.25 - 6);
  ctx.lineTo(width * 0.88 - 3, height * 0.25 - 6);
  ctx.strokeStyle = "white";
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();
  rEngPumpStyle.border = "2px solid white";
  rEngPumpStyle.borderRadius = "1px";
};

const setRElecPumpTrue = (ctx) => {
  rPressNum++;
  ctx.beginPath();
  ctx.moveTo(width * 0.82, height * 0.25);
  ctx.lineTo(width * 0.82, height * 1);
  ctx.strokeStyle = "rgb(8, 255, 66)";
  ctx.lineWidth = 10;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc(width * 0.82 + 5, height * 0.25, 5, PI, 0, false);
  ctx.strokeStyle = "rgb(8, 255, 66)";
  ctx.lineWidth = 10;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.moveTo(width * 0.82 + 5, height * 0.25 - 5);
  ctx.lineTo(width * 0.88 - 5, height * 0.25 - 5);
  ctx.strokeStyle = "rgb(8, 255, 66)";
  ctx.lineWidth = 10;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc(width * 0.88 - 5, height * 0.25 - 10, 5, 0, PI, false);
  ctx.strokeStyle = "rgb(8, 255, 66)";
  ctx.lineWidth = 10;
  ctx.stroke();
  ctx.closePath();
  rElecPumpStyle.border = "4px solid rgb(8, 255, 66)";
  rElecPumpStyle.borderRadius = "2px";
  rElecPumpRun = true;
};

const setRElecPumpFalse = (ctx) => {
  ctx.beginPath();
  ctx.moveTo(width * 0.82, height * 0.25 - 5);
  ctx.lineTo(width * 0.82, height * 0.7);
  ctx.strokeStyle = "white";
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.moveTo(width * 0.82, height * 0.82);
  ctx.lineTo(width * 0.82, height * 1);
  ctx.strokeStyle = "white";
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc(width * 0.82 + 1, height * 0.25 - 5, 1, 0, PI, true);
  ctx.strokeStyle = "white";
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.moveTo(width * 0.82, height * 0.25 - 6);
  ctx.lineTo(width * 0.88 - 3, height * 0.25 - 6);
  ctx.strokeStyle = "white";
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();
  rElecPumpStyle.border = "2px solid white";
  rElecPumpStyle.borderRadius = "1px";
  rElecPumpRun = false;
};

let rPressNum = 0;

const drawRightSystem = (ctx) => {
  rPressNum = 0;
  if (rEngPump.value) {
    setREngPumpTrue(ctx);
  } else {
    setREngPumpFalse(ctx);
  }
  if (rElecPump.value == "ON") {
    setRElecPumpTrue(ctx);
  } else if (rElecPump.value == "OFF") {
    setRElecPumpFalse(ctx);
  } else if (rElecPump.value == "AUTO") {
    if (!rEngPump.value) {
      setRElecPumpTrue(ctx);
    } else {
      if (rPressDiff == 0) {
        if (rPress.value < 1350) {
          setRElecPumpTrue(ctx);
        } else {
          setRElecPumpFalse(ctx);
        }
      } else {
        if (rPressDiff > 0) {
          setRElecPumpFalse(ctx);
        } else {
          setRElecPumpTrue(ctx);
        }
      }
    }
  }
  if (rPressNum == 2 || rPressNum == 1) {
    ctx.beginPath();
    ctx.moveTo(
      width * 0.88,
      rPressNum == 2 ? height * 0.25 : height * 0.25 - 5
    );
    ctx.lineTo(width * 0.88, height * 0.08);
    ctx.strokeStyle = "rgb(8, 255, 66)";
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(width * 0.88 - 11, height * 0.08);
    ctx.lineTo(width * 0.88 + 11, height * 0.08);
    ctx.lineTo(width * 0.88, height * 0.03);
    ctx.fillStyle = "rgb(8, 255, 66)";
    ctx.fill();
    ctx.closePath();
    store.dispatch("hyd/increaseRPress");
  } else {
    ctx.beginPath();
    ctx.moveTo(width * 0.88, height * 0.25 - 5);
    ctx.lineTo(width * 0.88, height * 0.08);
    ctx.strokeStyle = "rgb(255, 255, 255)";
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(width * 0.88 - 7, height * 0.08);
    ctx.lineTo(width * 0.88 + 7, height * 0.08);
    ctx.lineTo(width * 0.88, height * 0.04);
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.fill();
    ctx.closePath();
    store.dispatch("hyd/decreaseRPress");
  }
  rPressDiff = 0;
};

const drawC1ElecPump = (ctx) => {
  if (c1ElecPump.value) {
    ctx.beginPath();
    ctx.moveTo(width * 0.42, height * 0.95);
    ctx.lineTo(width * 0.42, height * 1);
    ctx.strokeStyle = "rgb(8, 255, 66)";
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(width * 0.42 - 5, height * 0.95, 5, 1.5 * PI, 2 * PI, false);
    ctx.strokeStyle = "rgb(8, 255, 66)";
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(width * 0.42 - 5, height * 0.95 - 5);
    ctx.lineTo(width * 0.32, height * 0.95 - 5);
    ctx.strokeStyle = "rgb(8, 255, 66)";
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(width * 0.32, height * 0.95 - 10, 5, PI, 2 * PI, true);
    ctx.strokeStyle = "rgb(8, 255, 66)";
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(width * 0.32 - 5, height * 0.95 - 10);
    ctx.lineTo(width * 0.32 - 5, height * 0.25);
    ctx.strokeStyle = "rgb(8, 255, 66)";
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();
    c1ElecPumpStyle.border = "4px solid rgb(8, 255, 66)";
    c1ElecPumpStyle.borderRadius = "2px";
    store.dispatch("hyd/increaseCPress");
  } else {
    ctx.beginPath();
    ctx.moveTo(width * 0.42, height * 0.95 - 4);
    ctx.lineTo(width * 0.42, height * 1);
    ctx.strokeStyle = "rgb(255, 255, 255)";
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(width * 0.42 - 1, height * 0.95 - 4, 2, 1 * PI, 2 * PI, false);
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(width * 0.42 - 1, height * 0.95 - 5);
    ctx.lineTo(width * 0.32 - 4, height * 0.95 - 5);
    ctx.strokeStyle = "rgb(255, 255, 255)";
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(width * 0.32 - 4, height * 0.95 - 6, 2, PI, 2 * PI, true);
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(width * 0.32 - 5, height * 0.95 - 6);
    ctx.lineTo(width * 0.32 - 5, height * 0.43);
    ctx.moveTo(width * 0.32 - 5, height * 0.3);
    ctx.lineTo(width * 0.32 - 5, height * 0.25 - 5);
    ctx.strokeStyle = "rgb(255, 255, 255)";
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();
    c1ElecPumpStyle.border = "2px solid white";
    c1ElecPumpStyle.borderRadius = "1px";
  }
};

const drawC2ElecPump = (ctx) => {
  if (c2ElecPump.value) {
    ctx.beginPath();
    ctx.arc(width * 0.56 + 5, height * 0.9, 10, PI, 0, false);
    ctx.fillStyle = "rgb(8, 255, 66)";
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(width * 0.56 + 5, height * 0.9 - 5);
    ctx.lineTo(width * 0.62, height * 0.9 - 5);
    ctx.strokeStyle = "rgb(8, 255, 66)";
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(width * 0.62, height * 0.9 - 10, 10, PI, 0, true);
    ctx.fillStyle = "rgb(8, 255, 66)";
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(width * 0.62 + 5, height * 0.9 - 10);
    ctx.lineTo(width * 0.62 + 5, height * 0.25);
    ctx.strokeStyle = "rgb(8, 255, 66)";
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();
    c2ElecPumpStyle.border = "4px solid rgb(8, 255, 66)";
    c2ElecPumpStyle.borderRadius = "2px";
    store.dispatch("hyd/increaseCPress");
  } else {
    if (c1AirPump.value == "ON" || c2AirPump.value == "ON") {
      ctx.beginPath();
      ctx.moveTo(width * 0.56 + 2, height * 0.9 - 6);
      ctx.lineTo(width * 0.62 + 4, height * 0.9 - 6);
      ctx.strokeStyle = "rgb(255, 255, 255)";
      ctx.lineWidth = 2;
      ctx.stroke();
      ctx.closePath();
    } else {
      ctx.beginPath();
      ctx.moveTo(width * 0.56, height * 0.9 - 6);
      ctx.lineTo(width * 0.62 + 4, height * 0.9 - 6);
      ctx.strokeStyle = "rgb(255, 255, 255)";
      ctx.lineWidth = 2;
      ctx.stroke();
      ctx.closePath();
    }
    ctx.beginPath();
    ctx.arc(width * 0.62 + 4, height * 0.9 - 7, 2, 1 * PI, 0, true);
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(width * 0.62 + 5, height * 0.9 - 7);
    ctx.lineTo(width * 0.62 + 5, height * 0.43);
    ctx.moveTo(width * 0.62 + 5, height * 0.3);
    ctx.lineTo(width * 0.62 + 5, height * 0.25 - 5);
    ctx.strokeStyle = "rgb(255, 255, 255)";
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();
    c2ElecPumpStyle.border = "2px solid white";
    c2ElecPumpStyle.borderRadius = "1px";
  }
};

const startC1AirPump = (ctx) => {
  ctx.beginPath();
  ctx.moveTo(width * 0.52 + 6, height * 0.9 - 5);
  ctx.lineTo(width * 0.42, height * 0.9 - 5);
  ctx.strokeStyle = "rgb(8, 255, 66)";
  ctx.lineWidth = 10;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc(width * 0.42, height * 0.9 - 10, 10, 1 * PI, 0, true);
  ctx.fillStyle = "rgb(8, 255, 66)";
  ctx.fill();
  ctx.closePath();
  ctx.beginPath();
  ctx.moveTo(width * 0.42 - 5, height * 0.9 - 10);
  ctx.lineTo(width * 0.42 - 5, height * 0.25);
  ctx.strokeStyle = "rgb(8, 255, 66)";
  ctx.lineWidth = 10;
  ctx.stroke();
  ctx.closePath();
  c1AirPumpStyle.border = "4px solid rgb(8, 255, 66)";
  c1AirPumpStyle.borderRadius = "2px";
  store.dispatch("hyd/increaseCPress");
};

const stopC1AirPump = (ctx) => {
  ctx.beginPath();
  ctx.moveTo(width * 0.52 - 1, height * 0.9 - 6);
  ctx.lineTo(width * 0.42 - 3 - 1, height * 0.9 - 6);
  ctx.strokeStyle = "rgb(255, 255, 255)";
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc(width * 0.42 - 3 - 1, height * 0.9 - 7, 2, 1 * PI, 0, true);
  ctx.fillStyle = "rgb(255, 255, 255)";
  ctx.fill();
  ctx.closePath();
  ctx.beginPath();
  ctx.moveTo(width * 0.42 - 3 - 2, height * 0.9 - 7);
  ctx.lineTo(width * 0.42 - 3 - 2, height * 0.83);
  ctx.moveTo(width * 0.42 - 3 - 2, height * 0.7);
  ctx.lineTo(width * 0.42 - 3 - 2, height * 0.25 - 5);
  ctx.strokeStyle = "rgb(255, 255, 255)";
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();
  c1AirPumpStyle.border = "2px solid white";
  c1AirPumpStyle.borderRadius = "1px";
};

const drawC1AirPump = (ctx) => {
  if (c1AirPumpRun) {
    startC1AirPump(ctx);
  } else {
    stopC1AirPump(ctx);
  }
};

const startC2AirPump = (ctx) => {
  ctx.beginPath();
  ctx.arc(width * 0.52 + 5, height * 0.9 - 10, 10, 1 * PI, 0, true);
  ctx.fillStyle = "rgb(8, 255, 66)";
  ctx.fill();
  ctx.closePath();
  ctx.beginPath();
  ctx.moveTo(width * 0.52, height * 0.9 - 10);
  ctx.lineTo(width * 0.52, height * 0.25);
  ctx.strokeStyle = "rgb(8, 255, 66)";
  ctx.lineWidth = 10;
  ctx.stroke();
  ctx.closePath();
  c2AirPumpStyle.border = "4px solid rgb(8, 255, 66)";
  c2AirPumpStyle.borderRadius = "2px";
  store.dispatch("hyd/increaseCPress");
};

const stopC2AirPump = (ctx) => {
  ctx.beginPath();
  ctx.arc(width * 0.52, height * 0.9 - 7, 2, 1 * PI, 0, true);
  ctx.fillStyle =
    c1AirPump.value == "ON" || c1AirPumpRun
      ? "rgb(8, 255, 66)"
      : "rgb(255, 255, 255)";
  ctx.fill();
  ctx.closePath();
  ctx.beginPath();
  ctx.moveTo(width * 0.52 + 0.5, height * 0.9 - 7);
  ctx.lineTo(width * 0.52 + 0.5, height * 0.9 - 10);
  ctx.strokeStyle =
    c1AirPump.value == "ON" || c1AirPumpRun
      ? "rgb(8, 255, 66)"
      : "rgb(255, 255, 255)";
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.moveTo(width * 0.52 + 0.5, height * 0.9 - 10);
  ctx.lineTo(width * 0.52 + 0.5, height * 0.83);
  ctx.moveTo(width * 0.52 + 0.5, height * 0.7);
  ctx.lineTo(width * 0.52 + 0.5, height * 0.25 - 5);
  ctx.strokeStyle = "rgb(255, 255, 255)";
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();
  c2AirPumpStyle.border = "2px solid white";
  c2AirPumpStyle.borderRadius = "1px";
};

const drawC2AirPump = (ctx) => {
  if (c2AirPumpRun) {
    startC2AirPump(ctx);
  } else {
    stopC2AirPump(ctx);
  }
};

const stopRatPump = (ctx) => {
  ctx.beginPath();
  ctx.moveTo(
    c2ElecPump.value ? width * 0.62 + 9 : width * 0.62 + 4,
    height * 0.9 - 6
  );
  ctx.lineTo(width * 0.7 + 5, height * 0.9 - 6);
  ctx.strokeStyle = "rgb(255, 255, 255)";
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc(width * 0.7 + 4, height * 0.9 - 7, 2, 1 * PI, 0, true);
  ctx.fillStyle = "rgb(255, 255, 255)";
  ctx.fill();
  ctx.closePath();
  ctx.beginPath();
  ctx.moveTo(width * 0.7 + 5, height * 0.9 - 7);
  ctx.lineTo(width * 0.7 + 5, height * 0.63);
  ctx.moveTo(width * 0.7 + 5, height * 0.5);
  ctx.lineTo(width * 0.7 + 5, height * 0.25 - 5);
  ctx.strokeStyle = "rgb(255, 255, 255)";
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();
  ratPumpStyle.border = "2px solid white";
  ratPumpStyle.borderRadius = "1px";
};

const startRatPump = (ctx) => {
  ctx.beginPath();
  ctx.arc(width * 0.56 + 5, height * 0.9, 10, PI, 0, false);
  ctx.fillStyle = "rgb(8, 255, 66)";
  ctx.fill();
  ctx.closePath();
  ctx.beginPath();
  ctx.moveTo(width * 0.56 + 5, height * 0.9 - 5);
  ctx.lineTo(width * 0.7, height * 0.9 - 5);
  ctx.strokeStyle = "rgb(8, 255, 66)";
  ctx.lineWidth = 10;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc(width * 0.7, height * 0.9 - 10, 10, PI, 0, true);
  ctx.fillStyle = "rgb(8, 255, 66)";
  ctx.fill();
  ctx.closePath();
  ctx.beginPath();
  ctx.moveTo(width * 0.7 + 5, height * 0.9 - 10);
  ctx.lineTo(width * 0.7 + 5, height * 0.25);
  ctx.strokeStyle = "rgb(8, 255, 66)";
  ctx.lineWidth = 10;
  ctx.stroke();
  ctx.closePath();
  ratPumpStyle.border = "4px solid rgb(8, 255, 66)";
  ratPumpStyle.borderRadius = "2px";
  store.dispatch("hyd/increaseCPress");
};

const drawRatPump = (ctx) => {
  if (ratPump.value) {
    if (ratPumpRun) {
      startRatPump(ctx);
    } else {
      stopRatPump(ctx);
      ctx.beginPath();
      ctx.moveTo(width * 0.734, height * 0.505);
      ctx.lineTo(width * 0.681, height * 0.63);
      ctx.moveTo(width * 0.681, height * 0.505);
      ctx.lineTo(width * 0.734, height * 0.63);
      ctx.strokeStyle = "rgb(255, 198, 41)";
      ctx.lineWidth = 2;
      ctx.stroke();
      ctx.closePath();
      ratPumpStyle.border = "2px solid rgb(255, 198, 41)";
      ratPumpStyle.borderRadius = "1px";
    }
  } else {
    stopRatPump(ctx);
  }
};

const drawCenterSystem = (ctx) => {
  if (
    c2ElecPump.value ||
    c1AirPump.value == "ON" ||
    c2AirPump.value == "ON" ||
    c1AirPumpRun ||
    c2AirPumpRun ||
    (ratPumpRun && ratPump.value)
  ) {
    //画C2 elec和c1 air 和 c2 air 的公共线和rat的公共线
    ctx.beginPath();
    ctx.moveTo(width * 0.56, height * 0.9);
    ctx.lineTo(width * 0.56, height * 1);
    ctx.strokeStyle = "rgb(8, 255, 66)";
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();
  } else {
    //画C1 elec和c1 air 和 c2 air 的公共线
    ctx.beginPath();
    ctx.moveTo(width * 0.56, height * 0.9 - 5);
    ctx.lineTo(width * 0.56, height * 1);
    ctx.strokeStyle = "rgb(255, 255, 255)";
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();
    store.dispatch("hyd/decreaseCPress");
  }

  if (
    c1AirPump.value == "ON" ||
    c2AirPump.value == "ON" ||
    c1AirPumpRun ||
    c2AirPumpRun
  ) {
    //画c1 air 和 c2 air 的公共线
    ctx.beginPath();
    ctx.arc(width * 0.56 - 5, height * 0.9, 10, PI, 0, false);
    ctx.fillStyle = "rgb(8, 255, 66)";
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(width * 0.56 - 5, height * 0.9 - 5);
    ctx.lineTo(width * 0.52 + 5, height * 0.9 - 5);
    ctx.strokeStyle = "rgb(8, 255, 66)";
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();
  } else {
    //画c1 air 和 c2 air 的公共线
    ctx.beginPath();
    ctx.beginPath();
    ctx.arc(width * 0.56 - 1, height * 0.9 - 5, 2, 0, PI, true);
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(width * 0.56 - 1, height * 0.9 - 6);
    ctx.lineTo(width * 0.52, height * 0.9 - 6);
    ctx.strokeStyle = "rgb(255, 255, 255)";
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();
  }
  drawC1ElecPump(ctx);
  drawC1AirPump(ctx);
  drawC2AirPump(ctx);
  drawC2ElecPump(ctx);
  drawRatPump(ctx);
};
</script>

<style scoped>
.hyd_container {
  height: 591px;
  width: 634px;
  position: relative;
  z-index: 10;
}
.top {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  height: 110px;
  width: 95%;
}
.sub-box {
  display: flex;
  flex-direction: column;
  justify-content: end;
  flex-basis: 0; /* 添加这行，确保所有 sub-box 具有相同的基础宽度 */
  flex-grow: 1; /* 这里flex-grow: 1表示这个元素将会占据剩余的可用空间 */
  margin: 2px;
}

.lower {
  height: 300px;
  width: 634px;
  top: 110px; /* top div的高度 */
  left: 0;
  display: flex;
}

.center {
  width: 380px;
}

.center_0 {
  height: 100px;
  width: 380px;
  display: flex;
}

.center_1 {
  margin-top: -100px;
  height: 60%;
  width: 380px;
  display: flex;
}

.pump_disc {
  margin-top: 90px;
  margin-left: 10px;
}

.pump_disc2 {
  margin-left: 10px;
  margin-top: 30px;
}

.pump_disc_item1,
.pump_disc_item2 {
  font-family: "Arial", sans-serif;
  display: block;
  color: rgb(8, 214, 255);
  font-weight: 600;
  font-size: 14px;
  margin-top: -10px;
}

.pump_disc_item1 {
  text-align: center;
}

.center_2 {
  height: 40%;
  width: 380px;
  display: flex;
}

.right {
  width: 120px;
}

.boxItem {
  width: 36px;
  height: 40px;
}

.disc_font {
  width: 50px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
canvas {
  position: absolute;
  top: 110px;
  left: 0;
  z-index: 2;
}
.sov {
  width: 28px;
  height: 28px;
}
</style>
